<style lang="less" scoped>
.manualmain{
    .manual_data{
      background: white;
      padding-left: 0.5vw;
      padding-right: 0.5vw;
      width: 61vw;
      min-height: 40vw;
      margin-left: 18.5vw;
      .xuanzedata{
        position:relative;
        width: 61vw;
        font-size: 0.8vw;
        // height: 60vw;
        .manual_back{
          position:absolute;
          background-image: url(../../../images/pdflistbeijing.jpg);
          background-size:100% 100%;
          width: 61vw;
          height: 29.9vw;
          // height: 100%;
          // 50.3vw
        }
        .pdftitle0{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:4.1vw;
          top:9.5vw;
        }
        .pdftitle1{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:12.7vw;
          top:9.5vw;
        }
        .pdftitle2{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:21.3vw;
          top:9.5vw;
        }
        .pdftitle3{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:29.9vw;
          top:9.5vw;
        }
        .pdftitle4{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:38.4vw;
          top:9.5vw;
        }
        .pdftitle5{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:47.1vw;
          top:10.2vw;
        }
        .pdftitle6{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:4.1vw;
          top:21vw;
        }
        .pdftitle7{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:12.7vw;
          top:21vw;
        }
        .pdftitle8{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:21.3vw;
          top:21vw;
        }
        .pdftitle9{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:29.9vw;
          top:21vw;
        }
        .pdftitle10{
          position:absolute;
          width: 10vw;
          text-align: center;
          left:38.4vw;
          top:21vw;
        }
        .pdfdata0{
          position:absolute;
          opacity:0;
          cursor:pointer;
          width: 5.2vw;
          height: 7vw;
          left:6.7vw;
          top:4.2vw;
          background: black;
        }
        .pdfdata1{
          position:absolute;
          opacity:0;
          cursor:pointer;
          width: 5.2vw;
          height: 7vw;
          left:15.2vw;
          top:4.2vw;
          background: black;
        }
        .pdfdata2{
          position:absolute;
          opacity:0;
          cursor:pointer;
          width: 5.2vw;
          height: 7vw;
          left:23.8vw;
          top:4.2vw;
          background: black;
        }
        .pdfdata3{
          position:absolute;
          opacity:0;
          cursor:pointer;
          width: 5.2vw;
          height: 7vw;
          left:32.2vw;
          top:4.2vw;
          background: black;
        }
        .pdfdata4{
          position:absolute;
          opacity:0;
          cursor:pointer;
          width: 5.2vw;
          height: 7vw;
          left:40.8vw;
          top:4.2vw;
          background: black;
        }
        .pdfdata5{
          position:absolute;
          opacity:0;
          cursor:pointer;
          width: 5.2vw;
          height: 7vw;
          left:49.4vw;
          top:4.2vw;
          background: black;
        }
        .pdfdata6{
          position:absolute;
          opacity:0;
          cursor:pointer;
          width: 5.2vw;
          height: 7vw;
          left:6.7vw;
          top:15vw;
          background: black;
        }
        .pdfdata7{
          position:absolute;
          opacity:0;
          cursor:pointer;
          width: 5.2vw;
          height: 7vw;
          left:15.2vw;
          top:15vw;
          background: black;
        }
        .pdfdata8{
          position:absolute;
          opacity:0;
          cursor:pointer;
          width: 5.2vw;
          height: 7vw;
          left:23.8vw;
          top:15vw;
          background: black;
        }
        .pdfdata9{
          position:absolute;
          opacity:0;
          cursor:pointer;
          width: 5.2vw;
          height: 7vw;
          left:32.2vw;
          top:15vw;
          background: black;
        }
        .pdfdata10{
          position:absolute;
          opacity:0;
          cursor:pointer;
          width: 5.2vw;
          height: 7vw;
          left:40.8vw;
          top:15vw;
          background: black;
        }
      }
      .fistimg{
        width:61vw;
        margin: 0px;
        padding: 0px;
      }
      .footimg{
        width:61vw;
        margin: 0px;
        padding: 0px;
        
      }
  }
}


</style>
<template>
  <div class="manualmain">
    <MainUser></MainUser>
    <!-- <div style="height:3.2vw"></div>
    <affix style="margin-top:-3.2vw"> -->
      <MainTitle ref="maintitle"></MainTitle>
    <!-- </affix> -->
    <div class="manual_data">
      <div  v-for="(item,i) in layoutlistdata"
        v-if="i == 0">
        <el-image
          class="fistimg"
          :src="layoutlistdata[0].thumb"
          :fit="'cover'" ></el-image>
      </div>
      <div class="xuanzedata">
        <el-image
          class="manual_back"
          :src="imgdata"
          :fit="'cover'" ></el-image>
        <div v-if="i<5" v-bind:class="{ 'pdftitle0': i == 0, 'pdftitle1': i == 1, 'pdftitle2': i == 2,'pdftitle3': i == 3,'pdftitle4': i == 4}" 
        v-for="(item,i) in manuals" v-html="item.title">}</div>

        <div v-if="i<5" v-bind:class="{ 'pdfdata0': i == 0, 'pdfdata1': i == 1, 'pdfdata2': i == 2,'pdfdata3': i == 3,'pdfdata4': i == 4}"
        v-for="(item,i) in manuals" @click="downmanual(item.id)"></div>

        <div class="pdftitle5" >展厅图库</div>
        <!-- <div class="pdftitle5" >工艺要求</div> -->
        <div class="pdftitle6" >常见设计问题</div>
        <div class="pdftitle7" >标准制定</div>
        <div class="pdftitle8" >知识产权</div>
        <div class="pdftitle9" >检测报告</div>
        <div class="pdftitle10" >自学课件</div>
        <!-- <div class="pdftitle9" >内部资料</div> -->

        <div class="pdfdata5" @click="jishuitem('展厅图库')" ></div>
        <div class="pdfdata6" @click="jishuitem('常见设计问题')"></div>
        <div class="pdfdata7" @click="pdflist(1)"></div>
        <div class="pdfdata8" @click="jishuitem('知识产权')"></div>
        <div class="pdfdata9" @click="jiancepdflist(2)"></div>
        <div class="pdfdata10" @click="jiancepdflist(3)"></div>
        <!-- <div class="pdfdata9" ></div> -->
      </div>
      <div style="height:29.9vw"></div>
      <div
        v-for="(item,i) in layoutlistdata"
        v-if="i > 0">
        <el-image
          class="footimg"
          :src="item.thumb"
          :fit="'cover'" ></el-image>
      </div>

      <div style="height:5vw;"></div>
    </div>
    
  </div>
</template>
<script>
import { manuallist,layoutlist } from '@/request/api';
import MainTitle from '../main_title'
import MainUser from '../main_user'
export default {
    data() {
        return {
          imgdata:require("../../../images/pdflistbeijing.jpg"),
          manuals:[              
          ],
          pagintion: {
            total: 0,
            page_size:50,
            page: 1,
          },
          loading:false,
          pagesizes: [30,50,100],
          keywords:'',
          layoutlistdata:[]
        }
    },
    mounted() {
      // if(this.$route.query.keywords != undefined){
      //   this.keywords = this.$route.query.keywords;
      //   this.$refs.maintitle.setinput2(this.keywords);
      // }
      this.getlayoutlist();
      this.getmanuallist();
    },
    methods: {
      downmanual(id){
        let routeUrl = this.$router.resolve({
          path: 'jlb_manualdata',
          query: {'id': id}
        });
        window.open(routeUrl.href, '_blank');
      },
      pdflist(type){
        let routeUrl = this.$router.resolve({
          path: 'jlb_pdflist',
          query: {'type': type}
        });
        window.open(routeUrl.href, '_blank');
      },
      jiancepdflist(type){
        let routeUrl = this.$router.resolve({
          path: 'jlb_jiancepdf',
          query: {'type': type}
        });
        window.open(routeUrl.href, '_blank');
      },
      //获取C经典案例列表数据
      getmanuallist(){
          var param = {};
          param.page = this.pagintion.page;
          param.size = this.pagintion.page_size;
          // param.keywords = this.keywords;
          this.loading = true;
          manuallist(param).then(res => {
            this.loading = false;
            if(res.ok){
                this.manuals = res.data.data;
                this.pagintion.total = res.data.total;
            }
          })
      },
      //获取C经典案例列表数据
      getlayoutlist(){
          var param = {};
          param.page = 1;
          param.size = 50;
          param.page_id = 2;
          // param.keywords = this.keywords;
          layoutlist(param).then(res => {
            if(res.ok){
              this.layoutlistdata = res.data.data;
            }
          })
      },
      jishuitem(title){
        switch(title){
          case '展厅图库':
            this.$router.push({ name: 'jlb_cad' });
            break;
          case '常见设计问题':
            this.$router.push({ name: 'jlb_changjianwenti' });
            break;
          case '知识产权':
            this.$router.push({ name: 'jlb_zhishichanquan' });
            break;
      }
    },
    },
    components: {
        MainTitle,
        MainUser
    },

}
</script>
